// 入口函数
$(function() {
    // 需求1: 初始化文章分类列表数据;
    // 因为后面还要用，所以封装成函数！
    let layer = layui.layer;
    initArtCateList();
    // 封装
    function initArtCateList() {
        // 发送ajax
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(res => {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message);
            }
            // 渲染
            let arr = [];
            res.data.data.forEach(ele => {
                // // 发送ajax
                // axios({
                //     method: 'POST',
                //     url: '/my/article/updatecate',
                //     data: 'name=莫笑江湖少年梦&alias=谁不少年梦江湖&Id=' + ele.Id
                // })
                arr.push(`
                    <tr>
                        <td>${ ele.Id}</td>
                        <td>${ ele.name}</td>
                        <td>${ ele.alias}</td>
                        <td>
                            <button data-id="${ ele.Id}" class="btn-edit layui-btn layui-btn-xs">修改</button>
                            <button data-id="${ ele.Id}" class="btn-del layui-btn layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `);
            });
            // then()里面，forEach()外面处理数组
            $('tbody').empty().html(arr.join(''));
        })
    }

    // 需求2: 添加文章分类弹出层
    //   思路: 点击按钮，通过layui里面的layer，给出弹出层 open();
    $("#btnAdd").on('click', function() {
        // layui官网上的弹出层
        indexAdd = layer.open({
            type: 1,
            area: ['500px', '260px'],
            title: '添加文章分类',
            content: `
                <form id="formAdd" class="layui-form" action="">
                    <!-- 1.分类名称 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 2.分类别名 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类别名</label>
                        <div class="layui-input-block">
                            <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 3.按钮 -->
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `
        });
    });

    // 需求3: 点击确认添加按钮，添加文章分类
    //    事件委托 - 给form绑定submit事件
    let indexAdd;
    $("body").on('submit', '#formAdd', function(e) {
        // 阻止表单默认提交
        e.preventDefault();
        // 发送ajax
        axios({
            method: 'POST',
            url: '/my/article/addcates',
            // 参数要传递 ：a=1&b=2&c=3  类型
            data: $(this).serialize()
        }).then(res => {
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 成功提示
            layer.msg('恭喜您，添加文章分类成功！');
            // 刷新页面，清空form表单
            initArtCateList();
            $("#formAdd")[0].reset();
            // 关闭弹出层
            layer.close(indexAdd);
        })
    })

    // 需求4: 点击修改，显示弹出层
    let indexEdit = 0;
    let form = layui.form;
    $("tbody").on('click', '.btn-edit', function() {
        // layui官网上的弹出层
        indexEdit = layer.open({
            type: 1,
            area: ['500px', '260px'],
            title: '修改文章分类',
            content: `
                <form lay-filter="formEdit" id="formEdit" class="layui-form" action="">

                    <!-- 0.隐藏域保存 Id -->
                    <input type="hidden" name="Id">

                    <!-- 1.分类名称 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 2.分类别名 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类别名</label>
                        <div class="layui-input-block">
                            <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 3.按钮 -->
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                        </div>
                    </div>
                </form>
            `
        });
        // 获取id是在click事件里面，open()外面
        let id = $(this).attr('data-id');
        // 发送ajax，渲染文章分类信息
        axios({
            method: 'GET',
            // URL参数是写在路径里面的
            //  传值的时候   : 必须省略   / 必须保留
            url: '/my/article/cates/' + id
        }).then(res => {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message);
            }
            // 直接form.val()渲染
            form.val('formEdit', res.data.data);
        });
    })

    // 需求5: 修改文章分类 - 事件委托 （和添加几乎一模一样）
    $("body").on('submit', '#formEdit', function(e) {
        // 阻止表单默认提交
        e.preventDefault();
        // 发送ajax
        axios({
            method: 'POST',
            url: '/my/article/updatecate',
            // 参数要传递 ：a=1&b=2&c=3  类型
            data: $(this).serialize()
        }).then(res => {
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 成功提示
            layer.msg('恭喜您，修改文章分类成功！');
            // 刷新页面，清空form表单
            initArtCateList();
            $("#formEdit")[0].reset();
            // 关闭弹出层
            layer.close(indexEdit);
        })
    })

    // 需求6: 删除文章分类
    $('tbody').on('click', '.btn-del', function() {
        // 获取id
        let id = $(this).attr('data-id');
        // 发送 ajax 删除文章分类
        // 询问框
        layer.confirm('is not?', { icon: 3, title: '提示' }, function(index) {
            // 发送ajax
            axios({
                method: 'GET',
                //  url参数，删除 :  保留 /
                url: '/my/article/deletecate/' + id
            }).then(res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message);
                }
                // 成功提示
                layer.msg('恭喜您，删除文章分类成功！');
                // 重新渲染页面
                initArtCateList();
            });
            layer.close(index);
        });
    })

});